<template>
    <div>
        <el-button type="primary" @click="Import">导入</el-button>
        <el-button @click="Export">导出</el-button>
        <el-table :data="data.tableData" border>
            <el-table-column prop="username" label="姓名" />
            <el-table-column prop="mobile" label="电话" />
            <el-table-column  label="头像">
                <template #default="{row}">
                    <img :src="row.avatar" class="img">
                </template>
            </el-table-column>
            <el-table-column prop="openTime" label="开通时间" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small">查看</el-button>
                    <el-button size="small" type="info">角色</el-button>
                    <el-button size="small" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
           <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="data.queryModel.total">
            </el-pagination>
    </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { rolelist, alllist } from "@/http/api";
// import { download } from "@/utils/common";
import { useRouter } from "vue-router";
import { USER_RELATIONS } from "./Export2ExcelConstants";
import dayjs from "dayjs";
const router = useRouter();

const Export = async () => {
  // data.loading = true
  //所有员工列表
  let res = await alllist();
  let allUser = res.data.list;
  console.log(allUser);
  // 导入工具包
  let excel = await import("./Export2Excel");
  let data = formatJson(USER_RELATIONS, allUser);
  excel.export_json_to_excel({
    // excel 表头
    header: Object.keys(USER_RELATIONS),
    // excel 数据（二维数组结构）
    data,
    // 文件名称
    filename: "excelTitle",
    // 是否自动列宽
    autoWidth: true,
    // 文件类型
    bookType: "xlsx",
  });
  close();
};

const formatJson = (headers, rows) => {
  // 首先遍历数组
  // [{ username: '张三'},{},{}] => [[’张三'],[],[]]
  return rows.map((item) => {
    return Object.keys(headers).map((key) => {
      // 时间特殊处理
      if (headers[key] === "openTime") {
        return dateFormat(item[headers[key]]);
      }
      // 角色特殊处理
      if (headers[key] === "role") {
        // 导出的表格
        const roles = item[headers[key]];
        return JSON.stringify(roles.map((role) => role.title));
      }
      return item[headers[key]];
    });
  });
};
//通过dayjs插件格式化时间
const dateFormat = (val, format = "YYYY-MM-DD") => {
  if (isNaN(val)) {
    return val;
  }
  val = parseInt(val);
  return dayjs(val).format(format);
};
const data = reactive({
  queryModel: {
    page: 1,
    size: 10,
  },
  tableData: [],
  total:0
});
const handleSizeChange=(val)=>{
    data.queryModel.size=val
    getlist()
}
const handleCurrentChange=(val)=>{
    data.queryModel.page=val
    getlist()
}
const Import = () => {
  router.push("/import");
};
const handlePreview = (val) => {
  console.log(val);
};

const getlist = async () => {
  let res = await rolelist(data.queryModel);
  console.log('tabledata',res);
  data.tableData = res.data.list;
  data.queryModel.total=res.data.total
};

onMounted(() => {
  getlist();
});
</script>
<style lang="scss" scoped>
.img {
  width: "50px";
  height: "50px";
}
</style>